<template>
    <div>
        <el-card>
            <el-button type="primary" @click="recieve" class="mb-10">签收</el-button>
            <el-form :model="orderForm">
                <el-form-item>
                    <el-input v-model="orderForm.outTradeNo" style="width: 220px;" class="mr-10 mb-10"
                        placeholder="请输入交易编号" />
                    <el-input v-model="orderForm.consignee" style="width: 220px;" class="mr-10 mb-10"
                        placeholder="请输入收货人" />
                    <el-input v-model="orderForm.consigneeTel" style="width: 220px;" class="mr-10 mb-10"
                        placeholder="请输入收货人电话" />
                    <el-input v-model="orderForm.deliveryAddress" style="width: 220px;" class="mr-10 mb-10"
                        placeholder="请输入收货地址" />
                    <el-select v-model="orderForm.orderStatus" placeholder="订单状态" filterable class="mb-10">
                        <el-option label="已支付" value="PAID">已支付</el-option>
                        <el-option label="未支付" value="UNPAID">未支付</el-option>
                        <el-option label="已签收" value="FINISHED">支付</el-option>
                    </el-select>
                    <el-date-picker v-model="createTimeBegin" type="datetime" placeholder="创建时间"
                        @change="handleTimeBegin" class="mr-10" />
                    <el-date-picker v-model="createTimeEnd" type="datetime" placeholder="过期时间"
                        @change="handleTimeEnd" />
                    <el-button type="primary" @click="resetOrderList" class="ml-10">重置</el-button>
                    <el-button type="primary" @click="searchOrder">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="orderList" border @selection-change="handleSelectionChange" class="mb-10">
                <el-table-column type="selection" align="center" width="55" />
                <el-table-column type="index" label="序号" align="center" width="80" />
                <el-table-column label="订单号" prop="id" align="center" width="80">
                    <template #default="{ row, $index }">
                        <a style="color: skyblue;" href="javascript:;" @click="showOrderDetail(row)">{{ row.id }}</a>
                    </template>
                </el-table-column>
                <el-table-column label="交易编号" prop="outTradeNo" align="center" width="160" />
                <el-table-column label="订单状态" prop="orderStatus" align="center" width="160" />
                <el-table-column label="金额" prop="totalAmount" width="80" align="center" />
                <el-table-column label="收货人" prop="consignee" width="80" align="center" />
                <el-table-column label="收货人电话" prop="consigneeTel" width="120" align="center" />
                <el-table-column label="收货地址" prop="deliveryAddress" align="center" />
                <el-table-column label="创建时间" prop="createTime" align="center" />
            </el-table>
            <el-pagination v-model:currentPage="page" v-model:page-size="limit" :total="total"
                :page-sizes="[10, 50, 100]" layout="prev, pager, next, jumper, ->, sizes, total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            <el-tabs type="border-card" class="demo-tabs mt-10">
                <el-tab-pane>
                    <template #label>
                        <span class="custom-tabs-label">订单详情</span>
                    </template>
                    <el-table :data="orderDetailList" border @selection-change="handleSelectionChange">
                        <el-table-column type="index" label="序号" align="center" width="80" />
                        <el-table-column label="商品ID" prop="skuId" align="center" />
                        <el-table-column label="商品名称" prop="skuName" align="center" />
                        <el-table-column label="商品图片" prop="imgUrl" align="center">
                            <template #default="{ row, $index }">
                                <img :src="row.imgUrl" alt="" width="80" height="80" />
                            </template>
                        </el-table-column>
                        <el-table-column label="单价" prop="orderPrice" align="center" />
                        <el-table-column label="数量" prop="skuNum" align="center" />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import orderApi, { type orderModel, type orderDetailModel, type orderParams } from '@/api/order'
import { ElMessage } from 'element-plus';
import moment from 'moment'
// 初始化数据
const initOrderForm = (): orderParams => ({
    outTradeNo: '',
    consignee: '',
    consigneeTel: '',
    deliveryAddress: '',
    orderStatus: '',
    createTimeBegin: '',
    createTimeEnd: ''
})
// 搜索参数
const orderForm = ref<orderParams>(initOrderForm())
// 时间选择器格式
const createTimeBegin = ref('')
const createTimeEnd = ref('')
// 分页相关
const page = ref(1)
const limit = ref(10)
const total = ref(0)
// 订单列表
const orderList = ref<orderModel[]>()
// 订单详情列表
const orderDetailList = ref<orderDetailModel[]>([])
// 展示订单详情
const showOrderDetail = (row: orderModel) => {
    orderDetailList.value = row.orderDetailList
}
// 搜索
const searchOrder = async () => {
    try {
        let result = await orderApi.getOrderList(page.value, limit.value, orderForm.value)
        orderList.value = result.records
        total.value = result.total
    } catch (error) {
        ElMessage.error('搜索失败,请重试')
    }
}
// 选择订单列表
const orderSelection = ref<orderModel[]>([])
// 多选回调
const handleSelectionChange = (val: orderModel[]) => {
    orderSelection.value = val;
}
// 签收
const recieve = async () => {
    try {
        await Promise.all(orderSelection.value.map(async (order) => {
            return await orderApi.recieve(order.id);
        }))
        ElMessage.success('签收成功')
        searchOrder(); 
    } catch (error) {
        ElMessage.error('签收订单失败,请重试')
    }
}
// 创建时间选择器
const handleTimeBegin = async (val: string) => {
    orderForm.value.createTimeBegin = moment(val).format('YYYY-MM-DD')
}
// 过期时间选择器
const handleTimeEnd = async (val: string) => {
    orderForm.value.createTimeEnd = moment(val).format('YYYY-MM-DD')
}
// 重置
const resetOrderList = () => {
    orderForm.value = initOrderForm();
    searchOrder();
}
// 分页
const handleSizeChange = (val: number) => {
    limit.value = val;
    searchOrder();
}
// 翻页
const handleCurrentChange = (val: number) => {
    page.value = val;
    searchOrder();
}
onMounted(() => {
    searchOrder();
})
</script>

<style scoped>
.block {
    padding: 30px 0;
    text-align: center;
    flex: 1;
}

.block:last-child {
    border-right: none;
}

.block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
}
</style>